{% extends 'accounts/base.html' %}
{% load i18n admin_static %}
{% block title %}登录-数据中心运维平台{% endblock %}
{% block body %}
<body>
  <div class="login-container">
    <div class="slogan-container">
      <div class="logo">
        <img src="{% static 'idcops/logo.png' %}" />
      </div>
      <div class="slogan">
        数据中心监控管理平台
      </div>
    </div>
    <div class="form-container">
      <div class="form-title">
        登录
      </div>

      {% if messages %}
        {% for message in messages %}
        <div id="message" class="alert alert-{% if message.tags %}{{ message.tags }}{% endif %} alert-dismissible no-margin">
          {{ message }}
        </div>
        {% endfor %}
      {% endif %}
      {% if form.errors and not form.non_field_errors %}
        <p class="error">
        {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
        </p>
      {% endif %}
      {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
          <p class="error">
              {{ error }}
          </p>
        {% endfor %}
      {% endif %}
      
      <form class="form-fields" action="{% url 'idcops:login' %}" method="post">
        {% csrf_token %}
        <div class="form-field">
          <span class="form-icon">
            <i class="idcops idcops-yonghu2"></i>
          </span>
          <input type="text" name="username" onfocus="fs(0)" onblur="bl(0)" oninput="ca(0)" placeholder='账号'/>
          <span class="form-icon" onclick="cc(0)">
            <i class="close-btn idcops idcops-qingkong-"></i>
          </span>
        </div>
        <div class="form-field">
          <span class="form-icon">
            <i class="idcops idcops-mima"></i>
          </span>
          <input type="password" name="password" onfocus="fs(1)" onblur="bl(1)" oninput="ca(1)" placeholder='密码' />
          <span class="form-icon" onclick="cc(1)">
            <i class="close-btn idcops idcops-qingkong-"></i>
          </span>
        </div>
        <div class="form-field">
          <div id="drag"></div>
        </div>
        <div class="form-submit" onclick="st()">
          登录
        </div>
      </form>
    </div>
  </div>
</body>
<script src="{% static 'idcops/js/jquery.min.js' %}"></script>
<script src="{% static 'idcops/js/drag.js' %}"></script>
<script>
  $(document).ready(function() {
    $('#drag').drag()

    fs = function (index) {
      $('.form-field').eq(index).css({border: '1px solid #40a9ff'});
      let tmp = $('input').eq(index + 1).val()
      if (tmp.length > 0) {
        $('.close-btn').eq(index).css({display: 'inline-block'})
      }
    }

    bl = function (index) {
        $('.form-field').eq(index).css({border: '1px solid #eaeaea'});
        $('.close-btn').eq(index).css({display: 'none'})
      }

    ca = function (index) {
      let tmp = $('input').eq(index + 1).val()
      if (tmp.length > 0) {
        $('.close-btn').eq(index).css({display: 'inline-block'})
      } else {
        $('.close-btn').eq(index).css({display: 'none'})
      }
    }

    cc = function (index) {
      $('input').eq(index + 1).val('')
    }

    st = function () {
      let text = $('.drag_text').text()
      if (text == '验证通过') {
        $('.form-fields').submit()
      } else {
        alert("请先进行验证")
      }
    }

  })
</script>
{% endblock %}
</html>